<template>
  <div class="advisory-notice-page">
    <Header :header-tip="t('advisoryNotice')" />
    <BreadCrumb />
    <AdvisoryNoticeSearch @search="handleSearch" />
    <AdvisoryNoticeContent :data="list">
      <div class="flex justify-end mt-[8px]">
        <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :page-sizes="[10, 20, 50, 100]"
          :size="size"
          :disabled="disabled"
          :background="background"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </AdvisoryNoticeContent>
  </div>
</template>

<script setup lang="ts">
import type { ComponentSize } from 'element-plus'
import { ref } from 'vue'
import { useI18n } from 'vue-i18n'
import { queryAnnouncementList } from '~/api/api-cms'

// 定义接口
interface AdvisoryNoticeItem {
  title: string
  // type: 'news' | 'notice' | 'announcement'
  id: any
  [key: string]: any
}

const { t, locale } = useI18n()

const list = ref<AdvisoryNoticeItem[]>([])
const total = ref(0)

// 分页
const currentPage = ref<number>(1)
const pageSize = ref<number>(10)
const searchText = ref<string>('')
const size = ref<ComponentSize>('default')
const disabled = ref<boolean>(false)
const background = ref<boolean>(false)

const getList = async (): Promise<void> => {
  const res = await queryAnnouncementList({
    displayPosition: 1,
    language: locale.value === 'zh' ? 1 : 2,
    pageNum: currentPage.value,
    pageSize: pageSize.value,
    title: searchText.value,
  })
  if (res?.code === '200') {
    list.value = res.data.records
    total.value = res.data.total
  }
}

const handleSizeChange = (val: number): void => {
  pageSize.value = val
  currentPage.value = 1
  getList()
}

const handleCurrentChange = (val: number): void => {
  currentPage.value = val
  getList()
}

const handleSearch = (value: string): void => {
  currentPage.value = 1
  searchText.value = value
  getList()
}

onMounted(async () => {
  await nextTick()
  getList()
})
</script>

<style lang="scss" scoped>
.advisory-notice-page{
    background: #f5f5f5;
    flex: 1;
}
:deep(.el-pagination__classifier){
 display: none;
}
</style>
